<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-demo__dhoutdorsportaddinfo}">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="sportId" placeholder="请输入活动编号进行查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getDataListBySportId"></el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
                style="width: 100%;">
        <el-table-column prop="sportId" label="活动编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="sportAddress" label="活动地址" header-align="center" align="center"></el-table-column>
        <el-table-column prop="sportLeader" label="活动组织人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="sportTraffic" label="去往活动地点的交通方式" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="updateDialog(scope.row.sportId)">{{ $t('update') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!--修改信息弹出框-->
      <el-dialog :visible.sync="dialogVisible" title="修改活动信息" width="30%">
        <el-form :model="dhOutDorsSportAddInfoDto" :rules="rules" ref="ruleForm" :label-width="'120px'">
          <el-form-item label="活动地址" prop="sportAddress">
            <el-input v-model="dhOutDorsSportAddInfoDto.sportAddress" placeholder="活动地址"></el-input>
          </el-form-item>
          <el-form-item label="组织人" prop="sportLeader">
            <el-select v-model="dhOutDorsSportAddInfoDto.sportLeader">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交通方式" prop="sportTraffic">
            <el-input v-model="dhOutDorsSportAddInfoDto.sportTraffic" placeholder="去往活动地点的交通方式"></el-input>
          </el-form-item>
        </el-form>
        <template slot="footer">
          <el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
          <el-button type="primary" @click="updateSportAddInfo('ruleForm')">{{ $t('confirm') }}</el-button>
        </template>
      </el-dialog>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './dhoutdorsportaddinfo-add-or-update'

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/demo/dhoutdorsportaddinfo/page',
        getDataListIsPage: true,
        exportURL: '/demo/dhoutdorsportaddinfo/export',
        deleteURL: '/demo/dhoutdorsportaddinfo',
        deleteIsBatch: true
      },
      sportId: '',
      dataListBySportId: [],
      dialogVisible: false,
      dhOutDorsSportAddInfoDto: {
        sportId: '',
        sportAddress: '',
        sportLeader: '',
        sportTraffic: ''
      },
      rules: {
        sportAddress: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        sportLeader: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        sportTraffic: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ]
      },
      options: [{
        value: '活动负责人1',
        label: '活动负责人1'
      }, {
        value: '活动负责人2',
        label: '活动负责人2'
      }, {
        value: '活动负责人3',
        label: '活动负责人3'
      }, {
        value: '活动负责人4',
        label: '活动负责人4'
      }, {
        value: '活动负责人5',
        label: '活动负责人5'
      }]
    }
  },
  components: {
    AddOrUpdate
  },
  methods: {
    /**
     * 根据sportId查询户外活动附加信息
     */
    getDataListBySportId() {
      if (this.sportId === '') {
        this.query();
      } else {
        this.dataListLoading = true;
        this.$http.get('demo/dhoutdorsportaddinfo/getSportAddInfo/' + this.sportId)
            .then(({data: res}) => {
              this.dataListBySportId.push(res.data);
              this.dataList = this.dataListBySportId;
              this.dataListBySportId = [];
              this.dataListLoading = false;
            }).catch(_ => {
        })
      }
    },
    /**
     * 显示修改对话框
     * @param sportId
     */
    updateDialog(sportId) {
      this.dhOutDorsSportAddInfoDto.sportId = sportId;
      this.$http.get('demo/dhoutdorsportaddinfo/getSportAddInfo/' + sportId)
          .then(({data: res}) => {
            this.dhOutDorsSportAddInfoDto.sportAddress = res.data.sportAddress;
            this.dhOutDorsSportAddInfoDto.sportLeader = res.data.sportLeader;
            this.dhOutDorsSportAddInfoDto.sportTraffic = res.data.sportTraffic;
          }).catch(_ => {
      })
      this.dialogVisible = true;
    },
    /**
     * 修改户外运动附加信息
     * @param formName
     */
    updateSportAddInfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.put('demo/dhoutdorsportaddinfo/updateSportAddInfo', this.dhOutDorsSportAddInfoDto)
              .then(({data: res}) => {
                this.$message({
                  type: 'success',
                  message: '修改活动信息成功！'
                })
                this.dialogVisible = false;
                this.query();
              }).catch(_ => {
          })
        } else {
          return false;
        }
      });
    }
  }
}
</script>
